<template>
  <div>
    <div>
      <jxf-titletip :title="title" @refreshPage="refreshFuc" :hasGoBack="false" @goBack="goPrewview"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="balanceInfo" ref="balanceInfo">
          <el-form-item label="摘要:" prop="businessType">
            <el-select v-model="balanceInfo.businessType" clearable placeholder="全部">
              <el-option label="余额支付" value="11"></el-option>
              <el-option label="余额充值" value="12"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算事项:" prop="type">
            <el-select v-model="balanceInfo.type" clearable placeholder="全部">
              <el-option label="入账" value="1"></el-option>
              <el-option label="出账" value="2"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date label="时间段" :startTime.sync="balanceInfo.startTime" :endTime.sync="balanceInfo.endTime"></jxf-Date>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('balanceInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="balanceTable">
          <template slot="createTime" slot-scope="account">
            <div>{{account.row.createTime ? FormatDate.timeFormat(account.row.createTime) : ""}}</div>
          </template>
          <template slot="type" slot-scope="account">
            <div v-if="account.row.type === 1">入账</div>
            <div v-if="account.row.type === 2">出账</div>
            <div v-else></div>
          </template>
          <template slot="businessType" slot-scope="account">
            <div v-if="account.row.businessType === 11">余额支付</div>
            <div v-if="account.row.businessType === 12">余额充值</div>
            <div v-else></div>
          </template>
          <template slot="changedAmount" slot-scope="account">
            <div>￥{{account.row.changedAmount && account.row.changedAmount != 0 ? formatMoney.twoDecimal(account.row.changedAmount) : '0.00'}}</div>
          </template>
          <template slot="amount" slot-scope="account">
            <div>￥{{account.row.amount && account.row.amount != 0 ? formatMoney.twoDecimal(account.row.amount) : '0.00'}}</div>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
    export default {
        name: "BalanceFlow",
        props: {

        },
        data() {
          return {
            isSuccess: false,
            title: this.$route.params && this.$route.params.title ? this.$route.params.title : "余额流水",
            url: this.$route.params && this.$route.params.url ? this.$route.params.url : apis.finance.getMerchantBalanceList,
            formatMoney: formatMoney,
            FormatDate: FormatDate,
            balanceInfo: {
              businessType: "",
              endTime: "",
              startTime: "",
              type: ""
            },
            balanceTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '1',
                  label: '流水编号',
                  width: '200',
                  prop: 'tradeNo'
                },
                {
                  id: '2',
                  label: '结算事项',
                  prop: 'type',
                  show: 'template'
                },
                {
                  id: '3',
                  label: '摘要',
                  prop: 'businessType',
                  show: 'template'
                },
                {
                  id: '4',
                  minWidth: '200',
                  label: '变动金额金额（元）',
                  prop: 'amount',
                  show: 'template'
                },
                {
                  id: '5',
                  minWidth: '120',
                  label: '余额（元）',
                  prop: 'changedAmount',
                  show: 'template'
                },
                {
                  id: '6',
                  width: '190',
                  label: '关联订单号',
                  prop: 'orderNos'
                },
                {
                  id: '7',
                  label: '时间',
                  width: '160',
                  show: 'template',
                  prop: 'createTime'
                }
              ],
              operation: [],
              data: []
            },
            pageTotal:40,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          // 返回前面一个页面
          goPrewview() {
            window.history.back(-1);
          },
          exportExcel(){
            this.isSuccess = true;
            let data = {
              ...this.balanceInfo,
              userId: this.$route.params ? this.$route.params.userId : ""
            }
            ajax.export(apis.finance.exportBalanceFlow, data).then((res) => {
              this.isSuccess = false;
            }).catch((err) => {
              this.$message.error(err.message)
            })
          },
          refreshFuc() {
            this.resetForm('balanceInfo')
            this.currentPage = 1;
            this.pageSize = 10
            this.getData()
          },
          getData() {
            this.balanceTable.loading = true;
            let data = {
              ...this.balanceInfo,
              userId: this.$route.params ? this.$route.params.userId : "",
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(this.url, data).then(res => {
              if(res.code === "10000000") {
                this.balanceTable.data = res.data.balanceDetailsVoPageInfo.dataList;
                this.pageTotal = res.data.balanceDetailsVoPageInfo.total
              } else {
                this.$message.error(res.message)
              }
              this.balanceTable.loading = false;
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo;
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style scoped>

</style>
